<template>
  <div id="merchantReg" class="merchantReg">
    <div class="con">
      <div class="user">
        <div class="reg">
          <p class="headTitle">商户入驻信息注册</p>
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            status-icon
            label-width="100px"
            style="margin-right: 14%"
          >
            <!--用户名-->
            <el-form-item
              :rules="[
                { required: true, message: '请填写用户名', trigger: 'blur' },
              ]"
              class="pass"
              prop="username"
              label="用户名"
            >
              <el-input v-model="ruleForm.username"/>
            </el-form-item>

            <!--密码-->
            <el-form-item
              :rules="[
                { required: true, message: '请填写密码', trigger: 'blur' },
              ]"
              label="密码"
              prop="pass"
              class="pass"
            >
              <el-input v-model="ruleForm.pass" type="password"/>
            </el-form-item>

            <!--密确认-->
            <el-form-item label="确认密码" prop="checkPass" class="pass">
              <el-input v-model="ruleForm.checkPass" type="password"/>
            </el-form-item>

            <!--头像-->
            <el-form-item
              :rules="[
                { required: true, message: '请上传头像', trigger: 'change' },
              ]"
              label="头像"
              class="pass"
              prop="avatar"
            >
              <el-upload
                action=""
                :show-file-list="false"
                :before-upload="
                  (file) => handleBeforeUpload(file, 'avatar', 800, 506)
                "
                class="avatar-uploader"
                accept=".jpg,.jpeg,.png,.gif"
              >
                <img
                  v-if="ruleForm.avatar"
                  :src="ruleForm.avatar"
                  class="avatar"
                  style="width: 100px; margin-bottom: -15px"
                />
                <i v-else class="el-icon-upload avatar-uploader-icon">上传</i>
              </el-upload>
            </el-form-item>

            <!--邮箱-->
            <el-form-item
              :rules="[
                { required: true, message: '请填写邮箱', trigger: 'blur' },
                {
                  required: true,
                  pattern:
                    /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/,
                  message: '请输入正确的邮箱',
                  trigger: 'blur',
                },
              ]"
              class="pass"
              prop="email"
              label="邮箱"
            >
              <el-input v-model="ruleForm.email"/>
            </el-form-item>

            <!--手机号-->
            <el-form-item
              :rules="[
                { required: true, message: '请填写手机号', trigger: 'blur' },
                {
                  required: true,
                  pattern:
                    /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
                  message: '请输入正确的电话号码',
                  trigger: 'blur',
                },
              ]"
              label="手机号"
              class="pass"
              prop="phone"
            >
              <el-input v-model="ruleForm.phone" type="number"/>
            </el-form-item>

            <!--店铺名-->
            <el-form-item
              :rules="[
                { required: true, message: '请填写用店铺名', trigger: 'blur' },
              ]"
              class="pass"
              prop="shopName"
              label="店铺名"
            >
              <el-input v-model="ruleForm.shopName"/>
            </el-form-item>

            <!--主营类目-->
            <!--            <el-form-item-->
            <!--              :rules="[-->
            <!--                { required: true, message: '请选择主营类目', trigger: 'blur' },-->
            <!--              ]"-->
            <!--              class="pass"-->
            <!--              prop="mainManage"-->
            <!--              label="主营类目"-->
            <!--            >-->
            <!--              <el-select-->
            <!--                v-model="ruleForm.mainManage"-->
            <!--                filterable-->
            <!--                placeholder="请选择"-->
            <!--                @change="change()"-->
            <!--              >-->
            <!--                <el-option-->
            <!--                  v-for="item in merchantMainBusiness"-->
            <!--                  :key="item.id"-->
            <!--                  :label="item.name"-->
            <!--                  :value="item.id"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->

            <!--身份信息-->
            <el-container>
              <el-form-item
                :rules="[
                  {
                    required: true,
                    message: '请上传身份证头像面',
                    trigger: 'change',
                  },
                ]"
                style="width: 50%"
                label="身份证头像"
                class="pass"
                prop="idHeadPic"
              >
                <el-upload
                  action=""
                  :show-file-list="false"
                  :before-upload="
                    (file) => handleBeforeUpload(file, 'idHeadPic', 400, 200)
                  "
                  class="id-info-uploader"
                  accept=".jpg,.jpeg,.png,.gif"
                >
                  <img
                    v-if="ruleForm.idHeadPic"
                    :src="ruleForm.idHeadPic"
                    class="avatar"
                    style="width: 150px"
                  />
                  <img
                    v-else
                    src="@/assets/image/citizen1.png"
                    style="width: 100px"
                  />
                </el-upload>
              </el-form-item>

              <el-form-item
                :rules="[
                  {
                    required: true,
                    message: '请上传身份证国徽面',
                    trigger: 'change',
                  },
                ]"
                style="width: 50%"
                label="身份国徽面"
                class="pass"
                prop="idNationalEmblemPic"
              >
                <el-upload
                  action=""
                  :show-file-list="false"
                  :before-upload="
                    (file) => handleBeforeUpload(file, 'idNationalEmblemPic', 400, 200)
                  "
                  class="id-info-uploader"
                  accept=".jpg,.jpeg,.png,.gif"
                >
                  <img
                    v-if="ruleForm.idNationalEmblemPic"
                    :src="ruleForm.idNationalEmblemPic"
                    class="avatar"
                    style="width: 150px"
                  />
                  <img
                    v-else
                    src="@/assets/image/citizen2.png"
                    style="width: 100px"
                  />
                </el-upload>
              </el-form-item>
            </el-container>

            <!--三证合一否-->
            <el-form-item
              :rules="[
                {
                  required: true,
                  message: '请选择是否三证合一',
                  trigger: 'blur',
                },
              ]"
              class="pass"
              prop="isThreeCertInOne"
              label="三证合一"
            >
              <el-radio v-model="ruleForm.isThreeCertInOne" label="1"
              >是
              </el-radio
              >
              <el-radio v-model="ruleForm.isThreeCertInOne" label="0"
              >否
              </el-radio
              >
            </el-form-item>

            <!--营业执照-->
            <el-form-item
              :rules="[
                {
                  required: true,
                  message: '请上传营业执照',
                  trigger: 'change',
                },
              ]"
              label="营业执照"
              class="pass"
              prop="businessLicense"
            >
              <el-upload
                action=""
                :show-file-list="false"
                :before-upload="
                  (file) => handleBeforeUpload(file, 'businessLicense', 400, 600)
                "
                style="display: inline-block"
                accept=".jpg,.jpeg,.png,.gif"
              >
                <img
                  v-if="ruleForm.businessLicense"
                  :src="ruleForm.businessLicense"
                  class="avatar"
                  style="width: 150px; margin-bottom: -15px"
                />
                <i v-else class="el-icon-upload avatar-uploader-icon">上传</i>
              </el-upload>
              <el-button type="text" @click="dialogVisible = true"
              >查看示例
              </el-button
              >
            </el-form-item>

            <el-form-item style="text-align: center">
              <el-checkbox v-model="checked">我已阅读并同意
              </el-checkbox
              >
              <el-button type="text" @click="agreementVisible = true"
              >《平台合作协议》
              </el-button
              >
            </el-form-item>

            <!--按钮-->
            <el-form-item style="text-align: center">
              <el-button type="primary" @click="submitForm('ruleForm')"
              >提 交
              </el-button
              >
              <el-button class="reset" @click="resetForm('ruleForm')"
              >重 置
              </el-button
              >
            </el-form-item>
          </el-form>

          <!--营业执照示例-->
          <el-dialog
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            title="非三证合一营业执照"
            class="licenceBack"
            style="max-height: 800px; overflow: scroll"
          >
            <img :src="exampleBusinessLicensePic" style="width: 100%"/>
          </el-dialog>

          <!--平台协议-->
          <el-dialog
            :visible.sync="agreementVisible"
            :before-close="handleClose"
            title="平台协议"
            class="agreementBack"
            style="max-height: 800px; overflow: scroll"
          >
            <!--            <img :src="platformProtocolPic" style="width: 100%" />-->
            <div style="width: 100%">
              <div>为符合相关法律法规（包括《中华人民共和国电子商务法》《网络交易监督管理办法》《中华人民共和国消费者权益保护法》等）的相关规定，
                履行平台对平台内经营者真实信息的核验、登记等要求，您授权平台获取您身份信息（姓名、证件类别、证件号码、包含法定代表人身份证信息在内的营业执照相关信息），
                及其他必要的认证相关信息（证件照片、认证时间、设备信息、地址等），并将前述信息与您提供的面部特征信息进行比对或用于综合判断您是否符合经营相关的身份核验要求。
                同时，您确认同意《平台账户实名认证协议》，同步完成当前账号的实名认证。
              </div>
              <div>请您放心，在收集您的信息及提供信息比对技术服务的过程中，我们将采取行业领先的加密等安全技术措施保护您的信息。
                当您的身份信息与您提供的面部特征信息完成身份真实性、一致性比对或经系统综合判断符合核验要求的，您即可通过认证，
                我们也会将您的前述身份信息（您的姓名、证件类别、证件号码、地址、营业执照相关信息和面部特征信息）在中华人民共和国境内存储，作为您的门店及当前账号的认证信息。
              </div>
              <div>您同意我们仅在以下情景使用您的门店认证信息：</div>
              <div>（1）根据法律法规规定、诉讼、争议解决的需要，或按行政、司法机关依法提出的要求，依法使用您的门店认证信息；
              </div>
              <div>（2）您主动选择使用门店认证信息的情景。</div>
              <div>您对您的个人信息相关权益有任何问题的，可与客服联系，或者联系我们的个人信息保护专员。</div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
    <image-cropper
      v-model="showCrop"
      :imgSrc="imgSrc"
      :cropWidth="cropWidth"
      :aspectRatio="aspectRatio"
      :cropHeight="cropHeight"
      @uploadSuccess="uploadSuccess"
    ></image-cropper>
  </div>
</template>

<script>
import { merchantPicUploadPath } from "@/api/business/storage"
import { applyConfig, merchantApplyInfoSubmit, merchantMainClass } from "@/api/merchantApply.js"
import Fingerprint2 from "fingerprintjs2"
import ImageCropper from "@/components/ImageCropper";

export default {
  components: { ImageCropper },
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"))
      } else {
        callback()
      }
    }
    return {
      showCrop: false, // 展示裁切框
      cropWidth: 0, // 裁切框宽带
      cropHeight: 0, // 裁切框高度
      aspectRatio: 1,
      cropId: "",
      imgSrc: "",
      merchantPicUploadPath,
      merchantMainBusiness: undefined,
      exampleBusinessLicensePic: "",
      platformProtocolPic: "",
      dialogVisible: false,
      agreementVisible: false,
      checked: false,
      ruleForm: {
        username: "",
        pass: "",
        checkPass: "",
        avatar: "",
        email: "",
        phone: "",
        shopName: "",
        mainManage: "",
        idHeadPic: "",
        idNationalEmblemPic: "",
        isThreeCertInOne: "",
        businessLicense: ""
      },
      rules: {
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    }
  },
  created() {
    this.getMerchantMainBusiness()
    this.getApplyConfig()
  },
  methods: {
    handleBeforeUpload(file, cropId, cropWidth, cropHeight) {
      this.imgSrc = URL.createObjectURL(file); // 创建图片地址用于显示和裁切
      this.showCrop = true; // 打开裁切对话框
      this.cropWidth = cropWidth;
      this.cropHeight = cropHeight;
      this.aspectRatio = cropWidth / cropHeight;
      this.cropId = cropId; // 标记裁切的是商品图片
      return false; // 不自动上传，由用户手动触发上传
    },
    uploadSuccess(url) {
      if (this.cropId === "avatar") {
        this.ruleForm.avatar = url;
      }
      if (this.cropId === "idHeadPic") {
        this.ruleForm.idHeadPic = url;
      }
      if (this.cropId === "idNationalEmblemPic") {
        this.ruleForm.idNationalEmblemPic = url;
      }
      if (this.cropId === "businessLicense") {
        this.ruleForm.businessLicense = url;
      }
    },
    submitForm(formName) {
      var that = this
      if (!that.checked) {
        that.$message({
          message: "请勾选已阅读并同意平台协议",
          type: "error"
        })
      } else {
        that.$refs[formName].validate((valid) => {
          if (valid) {
            Fingerprint2.get(function(components) {
              const values = components.map(function(component, index) {
                if (index === 0) {
                  // 把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
                  return component.value.replace(/\bNetType\/\w+\b/, "")
                }
                return component.value
              })
              var fingerprint = Fingerprint2.x64hash128(values.join(""), 31)
              merchantApplyInfoSubmit(that.ruleForm, fingerprint).then(
                (res) => {
                  var data = res.data
                  if (data.errno === 0) {
                    that.$message({
                      message: "恭喜申请成功！请耐心等待审核结果",
                      type: "success"
                    })
                    that.$router.push({ path: "/merchantRegSuc" || "/" })
                  } else {
                    that.$message({
                      message: data.errmsg,
                      type: "error"
                    })
                  }
                }
              )
            })
          }
        })
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm.avatar = ""
      this.ruleForm.idHeadPic = ""
      this.ruleForm.idNationalEmblemPic = ""
      this.ruleForm.businessLicense = ""
    },
    change() {
      this.$forceUpdate()
    },
    getMerchantMainBusiness() {
      merchantMainClass().then((res) => {
        this.merchantMainBusiness = res.data.data
      })
    },
    getApplyConfig() {
      applyConfig().then((res) => {
        try {
          const config = res.data.data
          this.exampleBusinessLicensePic = config[0]
          this.platformProtocolPic = config[1]
        } catch (e) {
          console.log(e)
        }
      })
    },
    handleClose(done) {
      done()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.con {
  width: 45%;
  margin: 0% auto 30px;
}

.reg {
  width: 80%;
  margin: 0px auto;
}

.user {
  background: rgba(245, 76, 25, 0.2);
  border-radius: 20px;
  height: 880px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 35px;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.user::-webkit-scrollbar {
  width: 0 !important;
}

.merchantReg::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.con::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.merchantReg,
.con {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: hidden;
}

.headTitle {
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 30px auto;
  color: #333366;
  font-weight: bold;
  font-size: 18px;
}

.headTitle::after {
  content: ""; // 必须
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 25px;
  right: 0;
  width: 100%;
  height: 3px;
  background-color: #3366cc;
}

.avatar-uploader-icon {
  /*font-size: 20px;*/
  color: #ffffff;
  width: 100px;
  height: 36px;
  line-height: 36px;
  background-color: #3366ff;
  text-align: center;
  border-radius: 5px;
}

.id-info-uploader {
  display: inline-block;
}

.agreementBack::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.agreementBack {
  max-height: 1000px !important;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: hidden;
}

.agreementBack .el-dialog__body {
  max-height: 800px !important;
  overflow-y: scroll;
  -ms-overflow-y: scroll;
}

.agreementBack .el-dialog {
  margin-top: 5vh !important;
}

.licenceBack::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.licenceBack {
  max-height: 1000px !important;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: hidden;
}

.licenceBack .el-dialog__body {
  padding: 0px 0px !important;
}

.licenceBack .el-dialog__header {
  display: none;
}

.licenceBack .el-dialog {
  background-color: rgba(0, 0, 0, 0);
  margin-top: 0vh !important;
  width: 30% !important;
  margin-top: 2vh !important;
}

.reg .pass {
  margin-bottom: 0px !important;
  margin-top: 16px !important;
}

.merchantReg {
  background: linear-gradient(
      #2ae0c8,
      #a2e1d4,
      #acf6ef,
      #cbf5fb,
      #bdf3d4,
      #e6e2c3,
      #e3c887,
      #fad8be
  );
  background: -webkit-linear-gradient(
      #2ae0c8,
      #a2e1d4,
      #acf6ef,
      #cbf5fb,
      #bdf3d4,
      #e6e2c3,
      #e3c887,
      #fad8be
  );
  background: -o-linear-gradient(
      #2ae0c8,
      #a2e1d4,
      #acf6ef,
      #cbf5fb,
      #bdf3d4,
      #e6e2c3,
      #e3c887,
      #fad8be
  );
  background: -moz-linear-gradient(
      #2ae0c8,
      #a2e1d4,
      #acf6ef,
      #cbf5fb,
      #bdf3d4,
      #e6e2c3,
      #e3c887,
      #fad8be
  );
}
</style>
